<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="telephone=no" name="format-detection">
    <title>黎世阁-账户信息</title>
    <link rel="stylesheet" href="../css/public.css"/>
    <link rel="stylesheet" href="../personal.css/account.css"/>
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript">
    (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;

                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
            recalc();
        })(document, window);

    </script>
</head>
<body>
	<!--遮罩-->
	<div class="person_head">
			<div class="upload">
				<span>上传头像</span>
				<i class="iconfont close">&#xe7ee;</i>
			</div>
			<div class="select">
				<input style="position:absolute; opacity: 0;" type="file" id="fileToUpload" name="fileToUpload">
				<span>从手机相册选择</span>
			</div>
			<div class="photo">
				<div class="photo_1" id="photo_1">
					<div class="list-img" style="position: relative;">
						<img src="../personal_img/head.jpg" alt="" />
						<input type="hidden" name="photos[]" id="photos" />
				    </div>
				</div>
				<div class="person_btn">立即使用</div>
			</div>
			<div class="success">
				<div class="success_btn">
					<i class="iconfont enter">&#xe61f;</i>
					<p>上传成功！</p>
				</div>
			</div>
		</div>
    
    <div class="person_mask"></div>
    <!--性别选择-->
    <ul class="sex_box clearfix">
		<li>
			<span class="zi">男</span>
			<i class="iconfont">&#xe607;</i>
			<div class="iconfont dg">&#xe60e;</div>
		</li>
		<li class="special">
			<span class="zi c_r">女</span>
			<i class="iconfont c_red">&#xe61e;</i>
			<div style="display: inline-block;" class="iconfont dg">&#xe60e;</div>
		</li>
	</ul>
	<!--性别选择-->
	<!--昵称-->
	<div class="name_box">
		<textarea class="name_content"></textarea>
		<div class="sure_button">确定</div>
	</div>
	<!--昵称-->
    <!--遮罩-->
    <!--头部开始-->
	<header>
		<i class="iconfont left_jt">&#xe65b;</i>
		 <div class="title">账户信息</div>
	</header>
	<!--头部结束-->
	<!--头像开始-->
	<section class="formInfo clearfix">
		<span class="head">头像</span>
		<div class="head_img"><img src="../personal_img/head.jpg" alt="" /></div>
	</section>
	<!--头像结束-->
	<!--列表开始-->
	<div class="form">
		
	
	<div class="form_1 clearfix">
		<section class="formInfo_1 clearfix">
			<span class="account_name">账&nbsp;&nbsp;&nbsp;号：</span>
			<span class="account_name_1 num">18835184226</span>
		</section>
		<section class="formInfo_2 clearfix">
			<span class="account_name">昵&nbsp;&nbsp;&nbsp;称：</span>
			<span class="account_name_1 nickname">Sunshine</span>
			<i class="iconfont more one">&#xe6a7;</i>
		</section>
		<section class="formInfo_3 clearfix">
			<span class="account_name">出生年月：</span>
			<input class="age_box" type="date" value="">
			<i class="iconfont more two">&#xe6a7;</i>
		</section>
		<section class="formInfo_4 clearfix">
			<span class="account_name">性&nbsp;&nbsp;&nbsp;别：</span>
			<span class="account_name_1 nex">女</span>
			<i class="iconfont more three">&#xe6a7;</i>
		</section>
		<section class="formInfo_5 clearfix">
			<span class="account_name">地&nbsp;&nbsp;&nbsp;址：</span>
			<span class="account_name_1 place">3个</span>
			<i class="iconfont more three">&#xe6a7;</i>
		</section>
	</div>
	<div class="form_2 clearfix">
		<section class="inner_top clearfix">账户设置</section>
		<section class="inner clearfix">
			<div class="set_icon"><img src="../personal_img/account.png" alt="" /></div>
			<span>手机</span>
			<span class="inner_right">188****4126</span>
		</section>
		<section class="inner clearfix">
			<div class="set_icon"><img src="../personal_img/account_1.png" alt="" /></div>
			<span>微信</span>
			<span class="inner_right color_gray">已绑定</span>
		</section>
		<section class="inner clearfix">
			<div class="set_icon"><img src="../personal_img/account_2.png" alt="" /></div>
			<span>QQ</span>
			<span class="inner_right go">去绑定</span>
			<i class="iconfont more three">&#xe6a7;</i>
		</section>
		<section class="inner clearfix">
			<div class="set_icon"><img src="../personal_img/account_3.png" alt="" /></div>
			<span>微博</span>
			<span class="inner_right go">去绑定</span>
			<i class="iconfont more three">&#xe6a7;</i>
		</section>
	</div>
	<div class="form_2 clearfix">
		<section class="inner_top clearfix">安全设置</section>
		<section class="inner clearfix">
			<div class="set_icon"><img src="../personal_img/account_4.png" alt="" /></div>
			<span>密码</span>
			<span class="inner_right inner_right1">修改</span>
		</section>
		<section class="inner clearfix">
			<div class="set_icon"><img src="../personal_img/account_5.png" alt="" /></div>
			<span>支付密码</span>
			<span class="inner_right inner_right1">修改</span>
		</section>
	</div>
    </div>
    <!--列表结束-->
</body>
<script>
	$(".head_img").click(function(){
		
		$('.person_mask').show();
		$('.person_head').show();
		
	})
	$(".person_btn").click(function(){
		$('.success').show();
	})
	$(".close").click(function(){
		$('.person_head').hide();
		$('.person_mask').hide();
		$('.success').hide();
	})
	$(".formInfo_4").click(function(){
		$('.person_mask').show();
		$('.sex_box').show();
		
	})
	$(".sex_box li").click(function() {
		$(this).addClass("special").siblings().removeClass("special");
		var index = $(this).index('.sex_box li');
		setTimeout('$(".sex_box").hide()',200);
		setTimeout('$(".person_mask").hide()',200);
//		$('.person_mask').hide();
		
		$(".dg").css('display', 'none');
		$(".dg").eq(index).css('display', 'inline-block');

		$(".sex_box li").find('span').removeClass("c_r");
		$(this).find('span').addClass("c_r");

		$(".sex_box li").find('i').removeClass("c_red");
		$(this).find('i').addClass("c_red");
		
		$(".nex").text($(this).find('span').text());
	})
	
	$(".formInfo_2").click(function(){
		$(".person_mask").show();
		$(".name_box").show();
	})
		$(".sure_button").click(function() {
			
			$(".nickname").text($(".name_content").val());
			$(".name_box").hide();
			$(".person_mask").hide();
		})
	
</script>
<script>
//	$(".formInfo_3").click(function(){
//		$(".age_box_1").show();
//		$(".person_mask").show();
//	})
	$(".next").click(function(){
		$(".age_box_1").hide();
		$(".person_mask").hide();
		$(".date").text($(".age_box").val());
		
	})
	var ddd = new Date();
	var day =ddd.getDate();
	
	if(ddd.getMonth()<10){
	var month = "0"+(ddd.getMonth()+1); 
	}
	
	if(ddd.getDate()<10){
	 day = "0"+ddd.getDate(); 
	}
	
	var datew = ddd.getFullYear()+"-"+month+"-"+day;
	var datew = datew.toString();
	
	$('.age_box').val(datew);

</script>
</html>
